import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
import { useState } from 'react';
import create from 'zustand';

import TermsOfServiceContent from '../../policies/terms-of-service-content';
import { useStyles } from './UIs/styled-mui-dialog';

type TermOfServiceStore = {
    open: boolean;
    close: () => void;
    onSubmit: () => void;
};

const useTermOfServiceStore = create<TermOfServiceStore>((set) => ({
    open: false,
    close: () => set({ open: false }),
    onSubmit: undefined
}));

export const termOfServiceDialog = (onSubmit) => {
    console.log(onSubmit);
    useTermOfServiceStore.setState({
        onSubmit,
        open: true
    });
};

const TermOfServiceDialog = () => {
    const style = useStyles();
    const { close, open, onSubmit } = useTermOfServiceStore();
    const [doneScroll, setDoneScroll] = useState<boolean>(false);

    return (
        <Dialog open={open} onClose={close} maxWidth="sm" fullWidth>
            <Box className={`${style.dialogBackground} ${style.center}`}>
                <DialogTitle>Terms of Services</DialogTitle>
            </Box>
            <DialogContent
                className={`${style.dialogBackground} ${style.center}`}
                sx={{ maxHeight: '60vh' }}
            >
                <div className="p-4 my-4" style={{ maxHeight: 'inherit' }}>
                    <TermsOfServiceContent onEndScroll={() => setDoneScroll(true)} />
                </div>
            </DialogContent>
            <DialogActions
                className={`${style.dialogBackground} ${style.center}`}
                sx={{ px: 4, py: 2 }}
            >
                <Button
                    color="secondary"
                    variant="contained"
                    className={'w-100'}
                    disabled={!doneScroll}
                    onClick={() => {
                        if (onSubmit) {
                            onSubmit();
                        }
                        close();
                    }}
                >
                    I understand
                </Button>
            </DialogActions>
        </Dialog>
    );
};

export default TermOfServiceDialog;
